<!--业务日志的统计-->
<!--<script>-->
<!--    isOnline("auditor");-->
<!--</script>-->


<div style="margin-top: 20px">

    <div class="op">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间：</label>
            <div class="layui-input-inline">
                <input type="date" name="from" id="from" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 0px">
            <label class="layui-form-label">结束时间：</label>
            <div class="layui-input-inline">
                <input type="date" name="to" id="to" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline">
                <input type="text" name="username" id="username" maxlength="16" lay-verify="title" autocomplete="off"
                       placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">事件类型：</label>
            <div class="layui-input-inline" style="width: 100px">
                <select id="eventType" class="mySelect">
                    <option value=""></option>
                    <option value="0">业务级事件</option>
                    <option value="1">系统级事件</option>
                </select>
            </div>
        </div>
        <button class="layui-btn layui-btn-normal" id="queryBtn"><i class="fa fa-search"></i>&nbsp;查询</button>

    </div>
</div>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="myArea" style="width: 1400px;height:650px;margin: 40px auto"></div>
</div>




<script type="text/javascript">
    var myChart = null;

    var dataInfo={
        fromTime:"",
        toTime:"",
        eventType:"",
        name:""
    };

    initChart();
    getStatisticalData();

    /**
     * 统计按钮时间
     * */
    $("#queryBtn").live("click",function () {
        dataInfo.name=$("#username").val();
        dataInfo.fromTime=$("#from").val();
        dataInfo.toTime=$("#to").val();
        dataInfo.eventType=$("#eventType").val();

        //用户名处理
        if( dataInfo.name.trim()!="" && !checkLogUsername(dataInfo.name)){
            alert("用户名不能超过16位，且不包含除出下划线和减号以外的特殊字符");
            $("#username").val("");
            return;
        }
        //时间处理
        if(!isNull(dataInfo.fromTime)&&!isNull(dataInfo.toTime)) {
            if (compareFromAndTo(dataInfo.fromTime ,dataInfo.toTime)){
                dataInfo.fromTime = dataInfo.fromTime .replace(/-/g, "/") + " 00:00:00";
                dataInfo.toTime = dataInfo.toTime.replace(/-/g, "/") + " 23:59:59";
            }else {
                alert("时间区间先后存在问题!");
            }
        }else if(!isNull(dataInfo.fromTime )){
            dataInfo.fromTime  = dataInfo.fromTime .replace(/-/g, "/") + " 00:00:00";
        }else if(!isNull(dataInfo.toTime)){
            dataInfo.toTime = dataInfo.toTime.replace(/-/g, "/") + " 23:59:59";
        }

        getStatisticalData();
    });

    /**
     * 初始化echart
     * */
    function initChart() {
        myChart = echarts.init(document.getElementById('myArea'),"walden");
        var option = {
            title: {
                // x:"left",
                text: '',
                // left: 'center',
                // subtextStyle: {
                //     backgroundColor: 'rgba(0,0,0,0)',
                //     borderColor: '#ccc',       // 标题边框颜色
                //     itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10
                //     textStyle: {
                //         fontSize: 18,
                //         fontWeight: 'bolder',
                //         color: 'rgba(255,0,0,1)'          // 主标题文字颜色
                //     },
                //     subtextStyle: {
                //         color: '#aaa'          // 副标题文字颜色
                //     }
                // }
            },
            tooltip: {
                trigger:'axis',
            },
            legend: {
                // data: ['条数']
            },
            xAxis: {
                axisLabel: {
                    textStyle: {
                        color: '#000',
                        fontSize: '14'
                    },
                }
            },
            yAxis: {
                axisLabel: {
                    textStyle: {
                        color: '#000',
                        fontSize: '14'
                    },
                }
            },
            series: [{
                type: 'bar',
                data: [],
            }],
            dataZoom: [{
                id: 'dataZoomX',
                //startValue: '2014-06-01',
                show: true,
                start: 100,
                end: 45
            },{
                type: 'inside'
            }],
        };

        //定义点击事件
        // myChart.on('click', function (params) {
        //     // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        //     console.log(params);
        // });
        myChart.setOption(option);
    }

    /**
     * 更新数据
     * */
    function updateOption(option) {
        myChart.setOption(option);

    }

    /**
     * 请求数据
     * */
    function getStatisticalData() {
        isOnline("auditor");
        $.ajax({
           url:HOST.concat("/statiscal?token="+config.token),
            type:"GET",
            data:{
                fromTime:dataInfo.fromTime,
                toTime:dataInfo.toTime,
                eventType:dataInfo.eventType,
                name:dataInfo.name
            },
            dataType:"json",
            success:function (res) {
                //console.log(res);
                if(res.meta.state=="success"){
                    // console.log(res.data.dataArray);
                    var data=res.data.dataArray;
                    //存放业务事件
                    var busMap=new Map();
                    //存放系统事件
                    var sysMap=new Map();
                    //记录日志集合
                    var dateSet=new Set();
                    for(var i=0;i<data.length;i++){
                        var temp=data[i];
                        dateSet.add(temp.date);
                        if(temp.eventType==0||temp.eventType=="0"){
                            busMap.set(temp.date,temp.totalNum);
                        }else if(temp.eventType==1||temp.eventType=="1"){
                            sysMap.set(temp.date,temp.totalNum);
                        }
                    }

                    //集合转为数组
                    var dateArray=Array.from(dateSet);
                    var resArray=[];
                    for(var j=0;j<dateArray.length;j++){
                        var t=dateArray[j];
                        var sum=0;
                        var num1=0;
                        var num2=0;
                        if(busMap.get(t)!=undefined){
                            num1=busMap.get(t);
                        }else{
                            num1=0;
                        }
                        if(sysMap.get(t)!=undefined){
                            num2=sysMap.get(t);
                        }else{
                            num2=0;
                        }
                        sum=num1+num2;
                        resArray.push(sum);
                    }
                    // console.log(dateArray);


                    var str=res.data;
                    var fTime;
                    var tTime;
                    var eventCode;
                    var name;
                    if(str.fromTime==""){
                        fTime="任意";
                    }else{
                        fTime=(str.fromTime).substr(0,10);
                    }

                    if(str.toTime==""){
                        tTime="任意";
                    }else{
                        tTime=(str.toTime).substr(0,10);
                    }

                    if(str.name==""){
                        name="任意";
                    }else{
                        name=str.name;
                    }

                    if(str.eventCode==""){
                        eventCode="任意";
                    }else{
                        if(str.eventCode=="0"){
                            eventCode="业务事件"
                        }else if(str.eventCode=="1"){
                            eventCode="系统事件"
                        }else{
                            eventCode="任意"
                        }

                    }
                    // console.log(dateArray);
                    // console.log(busMap);
                    // console.log(sysMap);
                    // console.log(resArray);
                    var option={
                        tooltip : {
                            trigger: 'axis',
                            formatter:function (params) {
                                //console.log(params);
                                var dateTime=params[0].name;
                                //console.log(dateTime);
                                var totalNum=params[0].value;
                                var busNum=0;
                                var sysNum=0;
                                if(busMap.get(dateTime)!=undefined){
                                    busNum=busMap.get(dateTime);
                                }else{
                                    busNum=0;
                                }

                                if(sysMap.get(dateTime)!=undefined){
                                    sysNum=sysMap.get(dateTime);
                                }else{
                                    sysNum=0;
                                }

                                var msg= '日志日期：'+dateTime;

                                return [
                                    msg,
                                    '日志总数：'+totalNum+'条',
                                    '包含：',
                                    '业务事件日志：'+busNum+'条',
                                    '系统事件日志：'+sysNum+'条'
                                ].join('<br>')
                            }
                        },
                        title: {
                           // x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
                            // 'center' ¦ 'left' ¦ 'right'
                            // ¦ {number}（x坐标，单位px）
                            //y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                                       // 'top' ¦ 'bottom' ¦ 'center'
                                                       // ¦ {number}（y坐标，单位px）
                            //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
                            //backgroundColor: 'rgba(0,0,0,0)',
                           // borderColor: '#ccc',       // 标题边框颜色
                            //borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
                            //padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
                                                       // 接受数组分别设定上右下左边距，同css
                            //itemGap: 12,               // 主副标题纵向间隔，单位px，默认为10，
                            textStyle: {
                                fontSize: 30,
                                fontWeight: 'bolder',
                                color: '#333'          // 主标题文字颜色
                            },
                            subtextStyle: {
                                fontSize: 16,
                                color: 'rgba(30,144,255,1)'          // 副标题文字颜色 #aaa
                            },
                            text: '日志统计信息(单位:条)',
                            subtext:'起始时间:'+fTime +"\n\n"
                                +"终止时间:"+tTime+"\n\n"
                                +"用户名: "+name+"\n\n"
                            +"事件类型:"+eventCode,
                            // left: 'center',
                        },
                        yAxis:{
                            axisLabel: {
                                textStyle: {
                                    color: '#000',
                                    fontSize: '14'
                                },
                            }
                        },
                        xAxis:{
                            type: 'category',
                            data:dateArray,
                            axisLabel: {
                                textStyle: {
                                    color: '#000',
                                    fontSize: '12'
                                },
                            }
                        },
                        grid:{
                            left:200,
                            top:80,
                        },
                        series: [{
                            // name: '条数',
                            type: 'bar',
                            barWidth : 40,//柱图宽度
                            data: resArray,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#999999',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                            //barCategoryGap:'10%',
                            //barGap: 10,
                            //color:["#8dc1a9"]
                        }],
                        dataZoom: [
                            {
                                id: 'dataZoomX',
                                //startValue: '',
                                show: true,
                                start: 100,
                                end: 80
                            },{
                                type: 'inside',
                                // zoomOnMouseWheel:true,
                                //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
                                //moveOnMouseMove:true,
                                //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。

                            }],
                    };
                    updateOption(option);
                }else if(res.meta.state=="failed"){
                    var option = {
                        title: {
                            //left:'center',
                            textStyle: {
                                fontSize: 30,
                                fontWeight: 'bolder',
                                color: '#333'          // 主标题文字颜色
                            },
                            subtextStyle: {
                                fontSize: 16,
                                color: 'rgba(255,0,0,1)'          // 副标题文字颜色 #aaa
                            },
                            text: '日志统计信息(单位:条)',
                            subtext:'无相关记录'
                        },
                        tooltip: {},
                        legend: {
                        },
                        xAxis: {
                        },
                        yAxis: {
                        },
                        series: [{
                            type: 'bar',
                            data: [],
                        }],
                    };
                    alert(res.meta.message);
                    updateOption(option);
                }
            }

        });
    }

</script>





